<!-- 关于我们 -->
<template>
  <div class='bgff h100 pd pt10 dfgfdgtrt'>
    <p class="title-label">网站设置</p>

    <div class="mt20 sdfgdgdfyt">
      <n-form ref="formRef" label-width="120" :inline="false" size="normal" label-placement="left">
        <n-grid :cols="24" :x-gap="20">
          <n-form-item-gi span="24" label="视频:" path="" class="mt20">
            <div class="logo-context ac vertical-center pr" @click="photoShowModalvideo = true">
              <img :src="formValue.videoCover" class="w100 h100 imgjz" v-if="formValue.videoCover" />
              <span v-else>点击上传视频</span>
              <i class="iconfont dx-closefill sdfddfsrtxer" v-if="formValue.videoCover" @click.stop="formValue.videoCover = '';formValue.videourl=''"> </i>

            </div>
          </n-form-item-gi>

          <n-form-item-gi span="24" label="公司:" path="" class="mt20">

            <n-dynamic-input v-model:value="formValue.companyList" :on-create="onCreate">
              <template #create-button-default>
                点击添加公司
              </template>
              <template #default="{ value }">
                <div style="display: flex; align-items: center; width: 100%">

                  <n-input v-model:value="value.name" type="text" placeholder="请输入公司名称" size="medium" clearable
                    @change=""></n-input>
                  <n-input v-model:value="value.phone" type="text" placeholder="请输入联系电话" size="medium" clearable
                    @change="" class="ml10"></n-input>
                  <n-input v-model:value="value.location" type="text" placeholder="请输入联系地址" size="medium" clearable
                    @change="" class="ml10"></n-input>

                </div>
              </template>
            </n-dynamic-input>
          </n-form-item-gi>


          <n-form-item-gi span="24" label="微信公众号:" path="" class="mt20">
            <div class="logo-context ad vertical-center pr" @click="photoShowModal = true">
              <img :src="formValue.wechatQRCode" class="w100 h100 imgjz" v-if="formValue.wechatQRCode" />
              <span v-else>点击上传微信公众号二维码</span>
              <i class="iconfont dx-closefill sdfddfsrtxer" v-if="formValue.wechatQRCode"
                @click.stop="formValue.wechatQRCode = ''"> </i>
            </div>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>


    <div class="jkjnjmxertw  vertical-center">
      <n-button type="primary" size="medium" @click="saveFun">保存</n-button>

    </div>
    <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>微信公众号</div>
      </template>
      <div>
        <photoGallery @getImg="getImg" :types="'jfwxgzh' + Userid"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>


    <n-modal v-model:show="photoShowModalvideo" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>视频介绍</div>
      </template>
      <div>
        <photoGallery @getImg="getImgvideo" types="九分视频介绍" accept=".mp4,.m4v" >
        </photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalvideo = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImgvideo"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import photoGallery from "../../components/util/photoGallery";
import { callBack, dxpost, qurl, dxget } from "../../util/index"
const photoShowModal = ref(false)
const photoShowModalvideo = ref()
const apiurl = 'dxgjAdmin/dxglobalSetting'
const isbj = ref(false) // 是否为编辑的状态
let bjid = 0
const Userid = ref(localStorage.Userid)
const props = defineProps({
  lang: { type: String },
});

const onCreate = () => {
  return {
    name: "",
    phone: "",
    location: ""
  }
}

const formValue = ref({
  videourl: "",
  videoCover: "",
  companyList: [],
  wechatQRCode: ""
})

let jjnmnxe = "";
const getImg = (data) => {
  jjnmnxe = data;
};
const setImg = () => {
  formValue.value.wechatQRCode = jjnmnxe;
  photoShowModal.value = false;
};

let videoInfo = {}

const getImgvideo = (data) => {
  videoInfo = data

};

const setImgvideo = () => {
  formValue.value.videoCover = videoInfo.imgurl
  formValue.value.videourl = videoInfo.url
  photoShowModalvideo.value = false;

};



const initData = async () => {
  const { data }: any = await dxget(apiurl, { sxname: "Webpagesetup", roleId: localStorage.id, lang: props.lang })
  if (data.length <= 0) {
    return
  }
  isbj.value = true
  bjid = data[0].id
  const dataw = JSON.parse(data[0].text)
  if (dataw.videourl) {
    formValue.value.videourl = dataw.videourl
  }
  if (dataw.videoCover) {
    formValue.value.videoCover = dataw.videoCover
  }

  if (dataw.companyName) {
    formValue.value.companyName = dataw.companyName
  }
  if (dataw.companyList) {
    formValue.value.companyList = dataw.companyList
  }
  if (dataw.wechatQRCode) {
    formValue.value.wechatQRCode = dataw.wechatQRCode
  }


}
initData()
const saveFun = async () => {
  if (!isbj.value) {
    const { errno }: any = await dxpost(apiurl, { sxname: "Webpagesetup", roleId: localStorage.id, text: JSON.stringify(formValue.value), lang: props.lang })
    if (errno == 0) {
      window.$message.success('操作成功！')
      return
    }
  } else {
    const { errno }: any = await dxpost(apiurl, { id: bjid, text: JSON.stringify(formValue.value), lang: props.lang }, 'put')
    if (errno == 0) {
      window.$message.success('保存成功！')
    }
  }

}
</script>
<style scoped>
.dfgfdgtrt {
  overflow: auto;
  padding-bottom: 80px;
}

.sdfgdgdfyt {
  width: 1200px;
}

.logo-context {
  border: 1px dashed #999;
  width: 250px;
  height: 100px;
  text-align: center;
  color: #999;
  cursor: pointer;
  background: #e0e0e0;
}

.logo-context.ab {
  width: 94px;
  height: 94px;
}

.logo-context.ac {
  width: 600px;
  height: 300px;
}

.logo-context.ad {
  width: 200px;
  height: 200px;
}

.sdfddfsrtxer {
  font-size: 24px;
  position: absolute;
  right: -12px;
  top: -12px;
  cursor: pointer;
  color: red;
  background: #fff;
  border-radius: 50%;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
}
</style>